<template>
  <div class="order-detail w-card">
    <div class="content-box">
      <div class="title-box">
        <span>订单ID：{{ orderInfo.sysOrderId || '' }}</span>
        <span class="w-ml-10 f14"
          :class="'state'+orderInfo.orderStatus">{{ orderInfo.orderStatus == 1 ? '待支付' : orderInfo.orderStatus == 2 ? '已支付' : orderInfo.orderStatus == 3 ? '已受理' : orderInfo.orderStatus == 4 ? '部分成功-进行中' : orderInfo.orderStatus == 5 ? '成功' : orderInfo.orderStatus == 6 ? '关闭' : orderInfo.orderStatus == 7 ? '失败' : orderInfo.orderStatus == 8 ? '部分成功-已完成' : '' }}</span>
        <el-button style="margin-left:auto;" plain v-show="orderInfo.orderStatus == 5 || orderInfo.orderStatus == 8"
          @click="handleClick(orderInfo)">订单核减</el-button>
      </div>
      <div>
        <div class="title-text">
          <span>订单基本信息</span>
        </div>
        <div class="info-o">
          <img class="head-img" :src="orderInfo.headImg" alt="">
          <div class="info-box">
            <div>
              <span>订单编号：<span>{{ orderInfo.sysOrderId || '' }}</span></span>
              <span>下单时间：<span>{{ orderInfo.createTime ? getDateTime(orderInfo.createTime)[6] : '' }}</span></span>
            </div>
            <div>
              <span>商品名称：<el-link type="primary"
                  @click="toGoodsDetail(orderInfo.goodsId)">{{ orderInfo.goodsName }}</el-link></span>
              <span>订单品类：<span>{{ orderInfo.brandName + '【' + orderInfo.categoryName + '】' }}</span></span>
            </div>
            <div>
              <span>商户名称：<span>{{ orderInfo.shopName || '' }}</span></span>
            </div>
          </div>
        </div>
      </div>
      <div
        v-if="(orderInfo.childInfoList && orderInfo.childInfoList.length > 0) && (orderInfo.childInfoList[0].cardNo || orderInfo.childInfoList[0].uniqueCode || orderInfo.childInfoList[0].linkUrl)">
        <div class="title-text">
          <span>商品详细信息</span>
        </div>
        <div class="info-o">
          <div class="info-box">
            <div v-for="(item,index) in orderInfo.childInfoList" :key="item">
              <span v-show="item.cardNo">卡号：<span>{{ item.cardNo || '' }}</span></span>
              <span
                v-show="item.uniqueCode || item.linkUrl">商品{{ index+1 }}：<span>{{ item.uniqueCode || item.linkUrl }}</span></span>
              <span
                v-show="item.cardPwd">兑换码：<span>{{ isContains('card_see') ? item.cardPwd : codeEncrypt(item.cardPwd) }}</span></span>
              <span v-show="item.expireTime">有效期限：<span>{{ item.expireTime ? getDateTime(item.expireTime)[6] : '' }}</span></span>
              <span v-show="item.cardStatus">兑换状态：<span>{{ getDH(item.cardStatus)  || '' }}</span></span>
              <span v-show="item.orderStatus">状态：<span>{{ getKQ(item.orderStatus)  || '' }}</span></span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="title-text">
          <span>商品价格信息</span>
        </div>
        <div class="info-o">
          <div class="info-box">
            <div>
              <span>官方价(元)：<span>{{ numFormat(orderInfo.officialPrice) || '' }}</span></span>
              <span>成本价(元)：<span>{{ numFormat(orderInfo.costPrice) || '' }}</span></span>
              <!-- <span>建议价(元)：<span>{{ numFormat(orderInfo.suggestPrice) || '' }}</span></span> -->
              <span v-if="!isFX">售价(元)：<span>{{ numFormat(orderInfo.salePrice) || '' }}</span></span>
              <span v-else>折扣价(元)：<span>{{ numFormat(orderInfo.discountPrice) || '' }}</span></span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="title-text">
          <span>订单{{ isFX ? '扣费' : '支付' }}信息</span>
        </div>
        <div class="info-o">
          <div class="info-box">
            <div>
              <span>下单数量：<span>{{ orderInfo.goodsNum || '' }}</span></span>
              <span>{{isFX ? '扣费' : '支付' }}金额(元)：{{ orderInfo.payMoney }}</span>
              <span v-show="!isFX">佣金(元)：<span>{{ numFormat(orderInfo.income) || '' }}</span></span>
            </div>
            <div v-show="!isFX">
              <span>支付方式：<span>{{ orderInfo.payType == 2 ? '微信' : orderInfo.payType == 3 ? '支付宝' : '' }}</span></span>
              <span>支付时间：<span>{{ orderInfo.payTime ? getDateTime(orderInfo.payTime)[6] : '' }}</span></span>
              <span>支付流水号：<span>{{ orderInfo.payTransId || '' }}</span></span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div class="title-text">
          <span>生命周期信息</span>
        </div>
        <div class="item-content log-box">
          <el-empty v-show="recordList && recordList.length == 0" description="暂无操作数据" />
          <div class="steps-box">
            <div class="steps-item" v-for="item in recordList" :key="item">
              <span class="point-box"></span>
              <span style="color:#9f7790;">{{ item.recordTime ? getDateTime(item.recordTime)[6] : '' }}</span>
              <span>{{ item.content || '' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <subtraction ref="subtractionRef" @dialogClose="subDialogClose" />
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import api from './api'
import { warningDeal, getDateTime, numFormat, isContains } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
import subtraction from '@/components/subtraction.vue'
export default {
  components: {
    subtraction
  },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const subtractionRef = ref(null)

    const state = reactive({
      isFX: false,
      orderInfo: {},
      recordList: [],
      dhstatus: [
        {
          value: 1,
          label: '可售',
        },
        {
          value: 2,
          label: '销售中',
        },
        {
          value: 3,
          label: '已售出',
        },
        {
          value: 4,
          label: '兑换',
        },
        {
          value: 5,
          label: '过期',
        },
        {
          value: 6,
          label: '作废',
        },
      ],
      kqstatus: [
        {
          value: 1,
          label: '已受理',
        },
        {
          value: 2,
          label: '下单失败',
        },
        {
          value: 3,
          label: '完成',
        },
        {
          value: 4,
          label: '失败',
        },
      ],
    })

    function getDH(value) {
      let label = ''
      state.dhstatus.map(item => {
        if (item.value == value) {
          label = item.label
        }
      })
      return label
    }

    function getKQ(value) {
      let label = ''
      state.kqstatus.map(item => {
        if (item.value == value) {
          label = item.label
        }
      })
      return label
    }

    function getOrderInfo(sysOrderId) {
      const obj = {
        sysOrderId
      }
      api.orderDetail(obj).then(res => {
        if (res.code == '200') {
          state.orderInfo = res.data
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function toXiaofei() {
      router.push({ path: '/accountMng/xiaofei', query: { shopId: state.orderInfo.shopId, businessOrderId: state.orderInfo.sysOrderId } })
    }

    function toGoodsDetail() {
      router.push({ path: '/goods/details', query: { goodsId: state.orderInfo.goodsId } })
    }

    function getOrderRecord(sysOrderId) {
      const obj = {
        sysOrderId
      }
      api.orderRecord(obj).then(res => {
        if (res.code == '200') {
          state.recordList = res.data.list
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function codeEncrypt(code = '') {
      let myCode = ''
      myCode = code.slice(0, 4) + '******'
      return myCode
    }

    function handleClick(data) {
      subtractionRef.value.dialogShow(data.sysOrderId)
    }

    function subDialogClose() {
      const sysOrderId = route.query.sysOrderId
      if (sysOrderId) {
        getOrderInfo(sysOrderId)
        getOrderRecord(sysOrderId)
      }
    }

    onMounted(() => {
      const sysOrderId = route.query.sysOrderId
      state.isFX = (route.path.indexOf('fxOrder') > -1)
      if (sysOrderId) {
        getOrderInfo(sysOrderId)
        getOrderRecord(sysOrderId)
      }
    })

    return {
      ...toRefs(state),
      subtractionRef,
      getDateTime,
      numFormat,
      toXiaofei,
      toGoodsDetail,
      getDH,
      codeEncrypt,
      isContains,
      getKQ,
      handleClick,
      subDialogClose,
    }
  }
}
</script>

<style lang="scss" scoped>
.order-detail {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    .title-box {
      display: flex;
      align-items: center;
      > span {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
.info-o {
  display: flex;
  margin-top: 20px;
  gap: 20px;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20px;
}
.head-img {
  max-width: 200px;
  max-height: 150px;
}
.info-box {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  gap: 20px;
  font-size: 14px;
  > div {
    display: flex;
    align-items: center;
    > span {
      display: block;
      width: 30%;
    }
  }
}
.title-text {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  padding-top: 20px;
  border-bottom: 1px solid #cfcfcf;
}
.state4 {
  color: #00a854;
  font-size: 14px !important;
}
.state5 {
  color: #f40;
  font-size: 14px !important;
}
.steps-box {
  display: block !important;
  width: 100% !important;
  .steps-item {
    width: 100% !important;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    .point-box {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #d0d3d6;
    }
    &:not(:first-of-type)::before {
      content: "";
      position: absolute;
      left: 5px;
      top: calc(-100% + 5px);
      display: block;
      height: 100%;
      width: 1px;
      background-color: #d0d3d6;
    }
  }
}
.log-box {
  max-height: 50vh;
  overflow: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 20px;
  font-size: 14px;
}
.f14 {
  font-size: 14px !important;
}
</style>